<script setup>
import "../assets/Publish/iconfont.css"
import {computed, ref, watch} from "vue";
import $ from 'jquery';
import axios from "axios";
import {useUserStore} from "@/stores/UserStore.js";
import router from "@/router/index.js";
import "../assets/Release/iconfont.css"
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
const tt = ref("图文")
const topicList = ref([])
const ImageList = ref([])
const topic_search = ref("")

// function getList() {
//   axios.get("http://127.0.0.1:8081/topic/getTopicList").then(res => {
//     console.log(res)
//     topicList.value = res.data;
//   }).catch(err => {
//     console.log(err)//打印错误信息
//   })
// }
// getList()

function addtopic() {
  $(".hui").show();
  $(".topic-content").show()
}

function Hidden() {
  $(".hui").css("display", "none")
  $(".topic-content").css("display", "none")
}

function TopicYx(id, type) {
  const clickedElement = event.target;
  if (clickedElement.style.color === "white") {
    clickedElement.style.color = 'rgba(36,94,142,0.89)';
    clickedElement.style.backgroundColor = 'rgba(247,248,250,0.89)';
    topicYx.value = topicYx.value.filter(item => item.id !== id);
  } else {
    clickedElement.style.color = "white";
    clickedElement.style.backgroundColor = 'black';
    topicYx.value.push({id: id, type: type})
  }
}
function topic_searchs(id, type) {
  topicYx.value.push({id: id, type: type})
  topic_search.value=""
  $(".topic-content-search").css("display","none")
  $(".topic-content-xz").show()
}

const title = ref("")
const content = ref("")
const topicYx = ref([]);
const addTopic_text = ref("")
function imageList() {
  const fileInput = document.querySelector('input[type="file"]');
// 获取用户选择的文件
  const file = fileInput.files;
// 创建一个 FormData 对象
  const formData = new FormData();
  for (let i = 0; i < file.length; i++) {
    formData.append('files', file[i]);
  }
  axios.post("http://127.0.0.1:8081/art/upload", formData)
      .then(res => {
        console.log(res);
        ImageList.value = res.data;
      })
      .catch(err => {
        console.log(err); // 打印错误信息
      });
}

function add() {
  const requestData = {
    article: {
      title: title.value,
      content: content.value,
      classificationID: 1,
      userId: useUserStore().getUserInfo.id,
      viewCount: 1,
      likeCount: 2,
      collect: 1
    }, // 确保取值
    topics: topicYx.value, // 确保取值
    images: ImageList.value // 确保取值
  };
  console.log(requestData);

  axios.post("http://127.0.0.1:8081/art/addArticle", requestData, {
    headers: {
      'Content-Type': 'application/json' // 确保 Content-Type 为 application/json
    }
  })
      .then(res => {
        if (res.data.status === 200) {
          router.push({name: 'Dynamical'})
        }
      })
      .catch(err => {
        console.error(err); // 打印错误信息
      });
}
watch(() => topic_search.value, async (text) => {
  $(".topic-content-search").show()
  $(".topic-content-xz").css("display","none")
  topicList.value = (await axios.get("http://127.0.0.1:8081/topic/getTopicList", {
    params: {
      search: text
    }
  })).data
  console.log(topicList.value)
  if (topic_search.value===''){
    $(".topic-content-search").css("display","none")
    $(".topic-content-xz").show()
  }
}, {immediate: true})
async function addTopic() {
  const topic = ref({})
  topic.value = (await axios.get("http://127.0.0.1:8081/topic/addTopicType", {
    params: {
      type: addTopic_text.value
    }
  })).data
  topicYx.value.push({id: topic.value.id, type: topic.value.type})
  topicList.value = (await axios.get("http://127.0.0.1:8081/topic/getTopicList", {
    params: {
      search: topic_search.value
    }
  })).data
  $(".addTopic").css("display","none")
  $(".hui2").css("display","none")
}
function del(id,type) {
  topicYx.value = topicYx.value.filter(item => item.id !== id);
}
// const clickEmoji = (val) => {
//   content.value += val;
// };
</script>

<template>
  <div class = "ReleaseHeader">
    <span class = "ReleaseHeader-left" @click = "router.back()">
      <i class = "iconfont icon-fanhui"/>
    </span>
    <h3 style = "display:inline-block;width: 100%" class = "text-center">
      {{ tt }}
      <i class = "iconfont icon-xiaosanjiao" />
    </h3>
    <span class = "ReleaseHeader-right">
      <span class = "ReleaseHeader-right-span" @click = "add">发布</span>
    </span>
  </div>
  <div class = "img-list">
    <div v-for = "(list,index) in ImageList" :key = "index"
         :style = "`background-image: url('${list}')`"></div>
    <div class = "file-image">
      <input id = "file" type = "file" multiple @change = "imageList">
    </div>
  </div>
  <div class = "art-title">
    <input class="title" type = "text" v-model = "title" placeholder = "填写标题" size = "30">
  </div>
  <div class = "art-content">
    <textarea class="content" v-model = "content" placeholder = "输入正文" name = "art-content" />
  </div>
  <div>
    <div class = "art-topic" @click = "addtopic()">
      + 添加分区及话题
    </div>
    <div class = "art-topic" v-for = "(list,index) in topicYx" :key = "index">
      #{{ list.type }}
    </div>
  </div>
  <div class = "hui" style = "display:none;" @click = "Hidden" />
  <div class = "hui2" style = "display: none" @click = "Hidden" />
  <div class = "topic-content p-2" style = "display: none">
    <div class="topic-search">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" v-model="topic_search" class="topic-search-text" placeholder="搜索话题">
    </div>
    <div class="topic-content-search" style="display: none">
      <ul>
        <li v-for = "(list,index) in topicList" @click="topic_searchs(list.id,list.type)" :key = "index">
          #{{ list.type }}
        </li>
      </ul>
    </div>
    <div class="topic-content-xz">
      <h6>已选</h6>
      <div>
        <ul class = "topic-yx">
          <li v-for = "(list,index) in topicYx" :key = "index" @click="del(list.id,list.type)">
            #{{ list.type }}
          </li>
          <li @click = "$('.hui2').show() ;$('.addTopic').show()">
            + 添加话题
            <svg t = "1740360703971" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
                 xmlns = "http://www.w3.org/2000/svg" p-id = "2602" width = "200" height = "200">
              <path
                  d = "M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z"
                  fill = "#7F7F7F" p-id = "2603"></path>
            </svg>
          </li>
        </ul>
      </div>
      <h6>推荐话题</h6>
      <div>
        <ul class = "Recommend-topic">
          <li class="tj-topic" v-for = "(list,index) in topicList" :key = "index" @click = "TopicYx(list.id,list.type)">
            #{{ list.type }}
            <svg t = "1740360703971" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
                 xmlns = "http://www.w3.org/2000/svg" p-id = "2602" width = "200" height = "200">
              <path
                  d = "M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z"
                  fill = "#7F7F7F" p-id = "2603"></path>
            </svg>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="addTopic" style="display: none">
    <div class="addTopic-header">
      <span @click="$('.hui2').css('display','none');$('.addTopic').css('display','none')">取消</span>
      添加话题
      <span @click="addTopic()">确定</span>
    </div>
    <div>
      <input v-model="addTopic_text" type="text" size="20" placeholder="输入话题名称，最多20字符">
    </div>
  </div>
  <div class = "art-emoji">
    <div class = "float-left">
      <i class = "iconfont icon-haopingxiaolian" />
      <i class = "iconfont icon-aite" @click="router.push('Dynamical')"/>
      <i class = "iconfont icon-youxiyouxitingyouxijiyouxishoubingmianxing" />
    </div>
    <div class = "float-right">
      <i class = "iconfont icon-shezhi" />
    </div>
  </div>
</template>
<style scoped>
.addTopic{
  padding: 15px 10px;
  margin: 0 14px;
  width: 400px;
  height: 150px;
  background: white;
  position: absolute;
  top: 400px;
  left: 0;
  border-radius: 15px;
  z-index: 5;
  div:nth-of-type(1){
    span:nth-of-type(1){
      float: left;
      color: rgba(39,39,39,1);
    }
    text-align: center;
    color: #969896;
    span:nth-of-type(2){
      float: right;
      color: rgba(39,39,39,1);
    }
  }
  div:nth-of-type(2){
    margin: 5px 0 ;
    width: 100%;
    background-color: rgba(250,251,253,0.7);
    height: 90px;
    border-radius: 10px;
  }
}
.topic-content-search{
  li{
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: rgba(26,79,140,1);
  }
}
.topic-search{
  i{
    font-size: 20px;
    font-weight: bold;
    color: rgba(127,127,127,0.7);
    margin: 0 15px;
  }
  input::placeholder{
    color: rgba(127,127,127,0.7);
  }
  input{
    background: rgba(248,249,251,1);
  }
  width: 392px;
  margin: 10px;
  border-radius: 10px;
  height: 45px;
  background-color: rgba(248,249,251,1);
  line-height: 45px;
}
.ReleaseHeader-left,.ReleaseHeader-right{
  i{
    font-size: 26px;
    font-weight: bold;
  }
  font-size: 24px;
}

.title::placeholder,.content::placeholder{
  color: rgba(171,171,171,0.7);
}
.ReleaseHeader {
  position: relative;
}

.ReleaseHeader-left {
  position: absolute;
  left: 0;
}

.ReleaseHeader-right {
  position: absolute;
  right: 0;
}

.img-list {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.img-list::-webkit-scrollbar {
  display: none;
}


.img-list > div {
  flex: 0 0 auto;
  margin: 0 10px;
  width: 160px;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
}

.file-image {
  background-image: url("../../public/jia.jpg");
}

.img-list {
  margin: 20px 0;
}

#file {
  width: 160px;
  height: 160px;
  opacity: 0;
}

input {
  border: white 0 solid;
  outline: none;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.art-title {
  height: 60px;

  input {
    font-size: 22px;
    width: 100%;
    height: 100%;
    border-bottom: rgba(206,207,209,0.4) 1px solid;
  }
}

.art-content {
  textarea {
    width: 100%;
    height: 530px;
    outline: none;
    resize: none;
    border: none;
    padding-top: 14px;
  }

  font-size: 20px;
}

.art-emoji {
  i {
    font-size: 24px;
    margin: 8px;
    color: gray;
  }
}

.topic-content {
  width: 428px;
  height: 400px;
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 2;
  overflow-y: auto;
}
.topic-content::-webkit-scrollbar {
  display: none;
}
.Recommend-topic {
  padding: 0;
  li {
    display: inline-block;
    width: 46%;
    background: rgba(247, 248, 250, 0.89);
    margin: 5px;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 2px;
    color: rgba(36, 94, 142, 0.89);

    svg {
      width: 14px;
      height: 20px;
      float: right;

    }
  }
}

.topic-yx {
  padding: 0;

  li {
    display: inline-block;
    width: 46%;
    background: rgba(247, 248, 250, 0.89);
    margin: 5px;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 2px;
    color: rgba(36, 94, 142, 0.89);

    svg {
      width: 14px;
      height: 20px;
      float: right;
    }
  }
}

.art-topic {
  height: 30px;
  display: inline-block;
  background-color: rgba(243,244,246,1);
  color: rgba(128,128,128,1);
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  margin: 0 5px 10px;
  z-index: 100;
}

.hui,.hui2{
  width: 428px;
  height: 100%;
  background: black;
  opacity: 0.5;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
}
.hui2{
  z-index: 3;
}
</style>